import About from '../pages/About';
import Home from '../pages/Home';
import VueRouter from 'vue-router';
import Message from '../pages/Message';
import News from '../pages/News';
import MessageDetail from '../pages/MessageDetail';
import NewsDetial from '../pages/NewsDetial';

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { isAuth: true, title: '主页' },
      children: [
        {
          path: 'message',
          component: Message,
          meta: { isAuth: true, title: '消息' },
          //使用query ,要用props 进行解耦操作   :id/:title 没有这个所以不能用 params
          children: [
            {
              name: 'mxiangqing',
              path: 'detail',
              component: MessageDetail,
              meta: { isAuth: true, title: '详情' },
              //路由独享守卫,就是写在index.js的一个的配置对象,要以对象的形式匹配,
              //全局守卫和独享守卫同时进行的时候(独享守卫优先)
              beforeEnter: (to, form, next) => {
                if (localStorage.getItem('school') === 'atiguigu1') {
                  next();
                } else {
                  alert('你没有权限查看!!!!');
                }
              },
              afterEach: () => {},
            },
          ],
        },
        {
          path: 'news',
          component: News,
          children: [
            //<!-- 不在index.js 写的话, path: 'detail/:id/:title',    只能更新一次 -->
            //自动就注入到params中去了   :id/:title 必须要用这个 props 才能够传出去
            {
              name: 'nxiangqing',
              path: 'detail/:id/:title',
              component: NewsDetial,
              // props: false,
              // //如果下面写了props,上面的设置将会失效,这是我在公司里面试出来的,不要问我为什么
              // props: { a: 1, b: 2 },

              //第三种方法,函数的形式
              props($route) {
                return {
                  id: $route.params.id,
                  title: $route.params.title,
                  a: 1,
                  b: 'hello',
                };
              },
            },
          ],
        },
      ],
    },
    { path: '/about', component: About },
  ],
});

//全局前置路由守卫 ----初始化的时候别调用,每次路由切换被调用
//相当于JavaWeb中的拦截器了
router.beforeEach((to, from, next) => {
  console.log('to', to);
  // console.log('from', from);
  // console.log('next', next);
  if (localStorage.getItem('school') === 'atiguigu') {
    next();
  } else {
    alert('你没有权限查看!!!!');
  }
});
//全局后置路由守卫 ----初始化的时候被调用,每次路由切换之后被调用
router.afterEach((to, next) => {
  document.title = to.meta.title || '硅谷系统';
});

export default router;
